<template>
  <div class="site-container" v-if="show">
    <van-nav-bar
        title="站点信息"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="content">
        <div class="type">
            <div class="type-left">
                充电桩类型：<span class="left-text">{{ chargingInfo.type }}</span>
            </div>
            <div class="type-right">
                {{ chargingInfo.location }}
                <span>到这里</span>
            </div>
        </div>
        <div class="info-text">
            <b>提示:</b>
            <span>提示:因充电站繁忙，现已进入需预约充电时间段,请预约充电，最大充电时间xx分钟，需预付款xx元锁定, 若充电订单10分钟内取消则会退款.</span>
        </div>
        <div class="charge-pile">
            <div class="charge-top">
                <div class="pile-num">{{ chargingInfo.serial_number }}号充电桩</div>
                <van-button size="mini" type="info" :disabled="chargingInfo.subscribe == 1 ? true : false">预约</van-button>
            </div>
            <p> 
                <span>支持功率：{{ chargingInfo.power }}</span>
                <span>枪头数: {{ chargingInfo.q_Num }}</span>
                <span>{{ chargingInfo.whether }}</span>
            </p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            chargingInfo: {}
        }
    },
    props:{
        show: {
            type: Boolean,
            default: false
        },
        params: {
            type: String
        }
    },
    methods: {
        onClickLeft() {
            console.log()
            this.$parent.isChargeInfo = false
        },
        getCharge(params) {
            this.$axios.post("http://www.jiaoyisen.com:8887/api/chargingInfo",{params}).then(({data}) => {
                console.log(data);
                this.chargingInfo = data
            })
        }
    },
    created() {
        this.getCharge()
    }
}
</script>

<style lang="sass" scoped>
.site-container
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    background: #ffff
    z-index: 9990
.content
    padding: .3rem
    .type
        display: flex
        justify-content: space-between
        align-items: center
        font-size: .24rem
        line-height: .4rem
        .type-left
            font-size: .32rem
            .left-text
                font-size: .24rem
        .type-right
            span
                padding: .05rem .15rem
                background: skyblue
                border-radius: .4rem
                color: #fff
    .info-text
        margin-top: .1rem
        font-size: .24rem
        line-height: .36rem
    .charge-pile
        width: 100%
        padding: .3rem
        margin-top: .2rem
        background: #ccc
        border-radius: .2rem
        .charge-top
            display: flex
            justify-content: space-between
            align-items: center
            font-size: .24rem
            line-height: .4rem
            .van-button
                padding: .05rem .15rem
                border-radius: 5px
        p
            margin-top: .2rem
            display: flex
            justify-content: space-between
            font-size: .24rem
            line-height: .4rem
</style>